<template>
	<view class="">
		<!-- <view class="zl-flex-col zl-col-center">
			<image class="status-icon" src="/static/clone/success.png" mode=""></image>
			<view class="zl-font-46 zl-color-333 zl-font-500 zl-text-center"> 恭喜您上传语音成功啦! </view>
			<view v-if="audio.duration" class="zl-font-30 zl-color-333  zl-text-center zl-m-t-16">
				录音时长：{{audio.duration|getTime()}}
			</view>
			<view class="zl-theme-btn-out btn zl-m-t-60 zl-flex zl-row-center" @click="play()">
				<image v-if="!playIng" src="/static/clone/play.png" mode=""></image>
				<image v-else src="/static/clone/stop.png" mode=""></image>
				<text>{{playIng?'暂停':'试听一下'}}</text>
			</view>
			<view v-if="audio.duration" class="progress">
				<view class="line" :style="{'width':pro+'%'}">
				</view>
			</view>
			<view v-if="audio.duration" class="pro-des zl-flex zl-row-between zl-m-t-22">
				<text class="zl-color-999 zl-font-22">{{startTime|getTime()}}</text>
				<text class="zl-color-999 zl-font-22">{{audio.duration|getTime()}}</text>
			</view>
		</view> -->
		<view class="demand-tit zl-flex">
			<view class="line"></view>
			<view style="line-height: 43rpx;" class="zl-font-30 zl-color-000 zl-font-600 zl-m-l-12"> 请检查刚刚上传的语音 </view>
		</view>
		<view
			class="zl-flex zl-row-between zl-bg-color-white zl-m-l-30 zl-m-r-30 zl-p-l-30 zl-p-r-30 zl-p-t-40 zl-p-b-40 zl-m-t-40 zl-m-b-22"
			style="border-radius: 20rpx;">
			<view class="zl-flex">
				<image src="/static/clone/music.png" mode="" class="play" style="width: 80rpx;height: 80rpx;">
				</image>
				<view class="zl-m-l-18 zl-font-30 zl-color-000"
					style="height: 60rpx;width: 350rpx; overflow: hidden;text-overflow:ellipsis;white-space:nowrap;line-height: 60rpx;">
					{{audio.name}}
				</view>
			</view>
			<view class="zl-flex">
				<view class="download" v-if="playIng" @click="play">
					<image src="/static/work/stop.png" mode="" style="width: 25rpx;height: 25rpx;margin-right: 6rpx;">
					</image>
					暂停
				</view>
				<view class="download" @click="play" v-else>
					<image src="/static/work/listen.png" mode="" style="width: 25rpx;height: 25rpx;margin-right: 6rpx;">
					</image>
					试听
				</view>
			</view>
		</view>

		<view class="demand-tit zl-flex">
			<view class="line"></view>
			<view style="line-height: 43rpx;" class="zl-font-30 zl-color-000 zl-font-600 zl-m-l-12"> 克隆声音命名 </view>
		</view>
		<view class="form_box">
			<view class="form_item form_item_line zl-flex zl-row-between">
				<view class="form_item_right zl-flex zl-row-right">
					<input style="width: 100%;" v-model="form.name" placeholder="请输入克隆声音命名" :border="false" type="text"
						:clearable="false" placeholderStyle="color:#999;请输入克隆人命名" :cursor-spacing="80"
						:maxlength="20" />
				</view>
			</view>
		</view>
		<view class="footer zl-flex zl-row-center">
			<view class="btn zl-theme-btn" @click="create()"> 开始克隆</view>
		</view>
		<uni-popup :animation="false" ref="popup" type="center" background-color="#fff"
			border-radius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
			<view class="tip-box zl-flex-col zl-col-center">
				<view class="zl-color-666 zl-font-24 zl-m-t-30"> 点击继续克隆将扣除一次人声数量，是否继续！ </view>
				<view @click="submit()" class="btn zl-m-t-66 surebtn"> 继续克隆 </view>
				<view class="btn zl-m-t-32 cancelbtn" @click="$refs.popup.close()"> 稍后再试 </view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	const AudioManager = uni.createInnerAudioContext();
	// import popup from '@/components/popup.vue';
	import {
		debounce
	} from "@/utils/util.js";
	export default {
		// components: {
		// 	popup
		// },
		data() {
			return {
				audio: {
					"userFileId": 0,
					"name": "",
					"userId": 0,
					"url": ""
				},
				playIng: false,
				type: 1, //1录音,2文字转语音,3手机导入
				date: '',
				loginInfo: {},
				startTime: 0,
				pro: 0,
				timer: '',
				day: '',
				is_pro: false,
				form: {
					name: '',
					mateUserFileId: 0
				}
			};
		},
		filters: {
			getTime(millis) {
				let seconds = Math.floor(millis / 1000);
				let minutes = Math.floor((seconds % 3600) / 60);
				let remainingSeconds = seconds % 60;
				minutes = minutes < 1 ? '' : minutes + '分'
				remainingSeconds = remainingSeconds < 10 ? '0' + remainingSeconds + '秒' : remainingSeconds + '秒'
				return minutes + remainingSeconds
			}
		},
		onLoad(opt) {
			this.audio = getApp().globalData.temp_audio
			this.form.mateUserFileId = this.audio.userFileId
			var date = new Date()
			this.date = '(' + (date.getFullYear()) + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ')'
			this.day = (date.getMonth() + 1) + '-' + date.getDate()
			// console.log(this.audio, 1111);
			AudioManager.onEnded(() => {
				this.playIng = false
				this.startTime = 0
				this.pro = 0
				clearInterval(this.timer);
				console.log('已完成播放');
			})
			AudioManager.onCanplay((res) => {
				console.log('音频时长', AudioManager.duration);
			})
			AudioManager.onPlay((res) => {
				console.log('正在播放', res);
			});
			AudioManager.onStop(() => {
				console.log('播放已强行停止！');
			});
			AudioManager.onError((r) => {
				console.log(onError, '报错');
			})
		},
		onUnload() {
			clearInterval(this.timer);
			AudioManager.stop()
		},
		methods: {
			startTimer() {
				this.startTime += 1;
				if (this.startTime >= this.audio.duration) {
					clearInterval(this.timer);
				} else {}
				let seconds = Math.floor(this.audio.duration / 1000);
				this.pro = (this.startTime / seconds) * 100
			},
			play() {
				if (this.audio.url) {
					this.playIng = !this.playIng
					if (this.playIng) {
						AudioManager.src = this.audio.url;
						console.log(AudioManager.src);
						AudioManager.play();
						this.playIng = true
						this.timer = setInterval(this.startTimer, 1000);
					} else {
						AudioManager.pause();
						clearInterval(this.timer);
					}
				}
			},
			onUnload() {
				AudioManager.stop();
				clearInterval(this.timeUpdate)
			},
			goBack() {
				uni.navigateBack()
			},
			create: debounce(function() {
				if (!this.form.name) {
					return this.$util.msg('请填写名称！')
				}
				if (this.form.mateUserFileId <= 0) {
					return this.$util.msg('请上传音频文件！')
				}
				this.$refs.popup.open()

			}, 1000, true),
			submit() {
				this.$refs.popup.close()
				this.api.clone.submitvoicemodel(this.form).then(res => {
					if (res.code === 0) {
						getApp().globalData.isReload = true;
						uni.redirectTo({
							url: '/pages/clone/success?type=2'
						})
					} else {
						this.$util.msg(res.msg);
					}
				}).catch(err => {
					this.$util.msg('请检查网络连接！');
				})
			}
		}
	}
</script>
<style lang="scss">
	.pros {
		width: 690rpx;
		padding: 0 30rpx 20rpx;
	}

	.tip-box {
		width: 600rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 38rpx 80rpx 68rpx;
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 400rpx;
		height: 88rpx;
		border-radius: 44rpx;
	}

	.surebtn {
		background: linear-gradient(90deg, #5493DF 0%, #144FC3 100%);
		font-weight: 600;
		font-size: 28rpx;
		color: #fff;
	}

	.cancelbtn {
		background: #EEEEEE;
		font-weight: 600;
		font-size: 28rpx;
		color: #000;
	}

	.pro_title {
		width: 690rpx;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		padding: 30rpx 0;
	}

	.pro_des {
		width: 690rpx;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
		padding: 0 0 20rpx;
		color: darkblue;
	}

	.status-icon {
		width: 140rpx;
		height: 140rpx;
		margin: 170rpx auto 38rpx;
	}

	.btn {
		width: 400rpx;
		height: 88rpx;
		border-radius: 44rpx;

		image {
			width: 17rpx;
			height: 20rpx;
			margin-right: 12rpx;
		}
	}

	.btn-big {
		width: 690rpx;
		height: 88rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
	}

	.progress {
		width: 630rpx;
		height: 12rpx;
		background: #DDE7F7;
		border-radius: 6rpx;
		margin: 42rpx auto 0;
		overflow: hidden;

		.line {
			// transition: width 1s linear 0s;
			height: 12rpx;
			background: linear-gradient(270deg, #DDE7F7 0%, #144FC3 100%);
		}
	}

	.pro-des {
		width: 630rpx;
	}

	.bigpopbtn {
		width: 350rpx;
		height: 88rpx;
		border-radius: 44rpx;
	}

	.footer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 190rpx;
		background: #FFFFFF;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 690rpx;
			height: 110rpx;
			border-radius: 20rpx;
			font-size: 36rpx;
			color: #F9F9F9;
		}
	}

	.demand-tit {
		margin-top: 30rpx;
		margin-left: 30rpx;

		.line {
			width: 6rpx;
			height: 28rpx;
			background: #EB5E00;
			border-radius: 3rpx;
		}
	}

	.form_box {
		width: 690rpx;
		margin: 30rpx auto 0;
		padding-left: 30rpx;
		background-color: white;
		border-radius: 20rpx;

		.form_item {
			width: 660rpx;
			height: 100rpx;
			padding-right: 30rpx;
			position: relative;

			.form_item_left {
				text {
					width: 100%;
				}
			}

			.form_item_right {
				font-size: 28rpx;
				width: 100%;

				.right_icon {
					width: 10rpx;
					height: 20rpx;
				}
			}

			.form_item_right ::v-deep {
				input {
					color: rgba(21, 21, 21, 1) !important;
					font-weight: 500;
				}

				uni-number-box {
					input {
						color: #e4265b !important;
						font-weight: 500;
					}
				}
			}
		}

		.form_item_line::after {
			content: "";
			width: 100%;
			height: 1px;
			background-color: #f4f4f4;
			position: absolute;
			top: 99.9%;
		}
	}

	.download {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 121rpx;
		height: 56rpx;
		background: #ffffff;
		border-radius: 10rpx;
		border: 2rpx solid #000000;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
	}
</style>